<template>
  <el-card>
    <div style="border: 1px solid #e1e1e1;padding:5px;">
      <div desc="日期控制"
           style="margin-top:20px;display: flex;flex-direction:row;align-items: center;justify-content: left;">
        <div desc="当前可看日期" style="margin-left:20px;font-size:16px;">
          <span style="font-size: 32px;">{{getYear(currentDate)}}年{{getMonth(currentDate)}}月</span>
        </div>
        <div desc="切换上下或返回今天" style="margin: 0 80px 0 20px;">
          <el-button icon="el-icon-arrow-left" @click="back"></el-button>
          <el-button @click="backToday">今天</el-button>
          <el-button icon="el-icon-arrow-right" @click="forward"></el-button>
        </div>
        <div desc="操作">
          <el-button type="primary" @click="createSeasonWeek">创建赛季周数据</el-button>
          <el-button type="primary" @click="scheduleManage">日常任务管理</el-button>
          <el-button type="primary" @click="introduceScheduleTemplateManage" style="margin-left:30px;">周任务规划
          </el-button>
        </div>
      </div>
      <hr/>
      <div desc="日历" style="display:flex;flex-direction: row; justify-content: space-between;">
        <el-table id="month" desc="按月查看模式" border style="width:800px;" :data="monthData"
                  :header-row-class-name="headerClass" :row-class-name="rowClass" :cell-class-name="cellClass"
                  @cell-click="cellClick">
          <el-table-column label="一" prop="Mon" min-width="80" align="center">
            <template slot-scope="scope">
              <div
                :style="{height:'100px', display:'flex', justifyContent:'center', alignItems:'center', fontSize:'22px', cursor:'pointer', color: setNotCurrentMonthColor(scope.$index, scope.row.Mon), backgroundColor: setCurrentDayBackgroundColor(scope.$index, scope.row.Mon, 'Mon')}">
                {{scope.row.Mon}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="二" prop="Tue" min-width="80" align="center">
            <template slot-scope="scope">
              <div
                :style="{height:'100px', display:'flex', justifyContent:'center', alignItems:'center', fontSize:'22px', cursor:'pointer', color: setNotCurrentMonthColor(scope.$index, scope.row.Tue), backgroundColor: setCurrentDayBackgroundColor(scope.$index, scope.row.Tue, 'Tue')}">
                {{scope.row.Tue}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="三" prop="Wed" min-width="80" align="center">
            <template slot-scope="scope">
              <div
                :style="{height:'100px', display:'flex', justifyContent:'center', alignItems:'center', fontSize:'22px', cursor:'pointer', color: setNotCurrentMonthColor(scope.$index, scope.row.Wed), backgroundColor: setCurrentDayBackgroundColor(scope.$index, scope.row.Wed, 'Wed')}">
                {{scope.row.Wed}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="四" prop="Thu" min-width="80" align="center">
            <template slot-scope="scope">
              <div
                :style="{height:'100px', display:'flex', justifyContent:'center', alignItems:'center', fontSize:'22px', cursor:'pointer', color: setNotCurrentMonthColor(scope.$index, scope.row.Thu), backgroundColor: setCurrentDayBackgroundColor(scope.$index, scope.row.Thu, 'Thu')}">
                {{scope.row.Thu}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="五" prop="Fri" min-width="80" align="center">
            <template slot-scope="scope">
              <div
                :style="{height:'100px', display:'flex', justifyContent:'center', alignItems:'center', fontSize:'22px', cursor:'pointer', color: setNotCurrentMonthColor(scope.$index, scope.row.Fri), backgroundColor: setCurrentDayBackgroundColor(scope.$index, scope.row.Fri, 'Fri')}">
                {{scope.row.Fri}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="六" prop="Sat" min-width="80" align="center">
            <template slot-scope="scope">
              <div
                :style="{height:'100px', display:'flex', justifyContent:'center', alignItems:'center', fontSize:'22px', cursor:'pointer', color: setNotCurrentMonthColor(scope.$index, scope.row.Sat), backgroundColor: setCurrentDayBackgroundColor(scope.$index, scope.row.Sat, 'Sat')}">
                {{scope.row.Sat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="日" prop="Sun" min-width="80" align="center">
            <template slot-scope="scope">
              <div
                :style="{height:'100px', display:'flex', justifyContent:'center', alignItems:'center', fontSize:'22px', cursor:'pointer', color: setNotCurrentMonthColor(scope.$index, scope.row.Sun), backgroundColor: setCurrentDayBackgroundColor(scope.$index, scope.row.Sun, 'Sun')}">
                {{scope.row.Sun}}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding:5px;width:1200px;height: 800px;overflow-y:scroll;">
          <el-card style="margin:5px;" v-if="calendarData.name">
            <div style="display: flex;justify-content: space-between; margin-bottom: 10px;">
              <div style="font-size: 30px;">{{currentDay}}</div>
              <div style="font-size: 24px;">
                <span style="color:#1471ff;">S:[ {{calendarData.schedule.total_score}} ] </span>
                <span style="color:#16bc0a;">E:[ {{calendarData.schedule.total_energy}} ] </span>
                <span style="color:red;">T:[ {{getTime(calendarData.schedule.total_time)}} ]</span>
              </div>
              <el-button type="primary" @click="viewCurrentWeekSchedule">本周日程预览</el-button>
            </div>
            <el-table desc="周日程" border v-if="calendarData.schedule != undefined"
                      :data="calendarData.schedule.schedules">
              <el-table-column label="名称" prop="name" min-width="200"></el-table-column>
              <el-table-column label="类型" prop="type" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.type === 1">PVP</span>
                  <span v-if="scope.row.type === 2">PVE</span>
                  <span v-if="scope.row.type === 3">PVX</span>
                  <span v-if="scope.row.type === 4">其他</span>
                </template>
              </el-table-column>
              <el-table-column label="活跃度" prop="score" width="100"></el-table-column>
              <el-table-column label="元气值" prop="energy" width="100"></el-table-column>
              <el-table-column label="完成时间min" prop="time" width="120"></el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
    </div>

    <el-dialog desc="创建赛季周弹框" :visible="showSeasonWeekDialog" width="450px" @close="showSeasonWeekDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">创建赛季周</div>

      <el-form ref="ruleForm" label-position="left" label-width="100px" :model="formData" :rules="rules">
        <el-form-item label="赛季名称：" prop="season">
          <el-input v-model.trim="formData.season" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="开始日期：" prop="day">
          <el-date-picker
            v-model="formData.day"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            style="width:300px;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="周数：" prop="count">
          <el-input-number v-model="formData.count" :min="1" :max="55" style="width:300px;"></el-input-number>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="showSeasonWeekDialog = false">取 消</el-button>
        <el-button type="primary" @click="create">创 建</el-button>
      </span>
    </el-dialog>

    <el-dialog desc="日常任务管理弹框" :visible="showScheduleModal" width="1200px"
               @close="showScheduleModal = false">
      <div slot="title" style="text-align: left;font-size: 20px;">日常任务管理</div>
      <div style="float:left;margin:10px 0;">
        <el-input v-model.trim="scheduleParams.keyword" placeholder="模板名称" clearable style="width:200px;"
                  @keyup.enter.native="searchSchedule"></el-input>
        <el-button type="primary" @click="searchSchedule">搜索</el-button>
        <el-button type="primary" @click="addSchedule" style="margin-left:30px;">新增</el-button>
      </div>

      <el-table :data="scheduleTableData" border>
        <el-table-column label="名称" prop="name" min-width="200"></el-table-column>
        <el-table-column label="类型" prop="type" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 1">PVP</span>
            <span v-if="scope.row.type === 2">PVE</span>
            <span v-if="scope.row.type === 3">PVX</span>
            <span v-if="scope.row.type === 4">其他</span>
          </template>
        </el-table-column>
        <el-table-column label="活跃度" prop="score" width="100"></el-table-column>
        <el-table-column label="元气值" prop="energy" width="100"></el-table-column>
        <el-table-column label="获取次数" prop="week_count_energy" width="100"></el-table-column>
        <el-table-column label="完成时间min" prop="time" width="120"></el-table-column>
        <el-table-column label="状态" prop="status" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1" class="enable-status">启用</span>
            <span v-if="scope.row.status === 0" class="disable-status">停用</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" min-width="120">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.remark" placement="top">
              <span class="ellipsis">{{scope.row.remark}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="op" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editSchedule(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status === 0" type="success" size="mini" @click="updateStatus(scope.row.id, 1)">
              启用
            </el-button>
            <el-button v-if="scope.row.status === 1" type="danger" size="mini" @click="updateStatus(scope.row.id, 0)">停用
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination layout="prev, pager, next" :current-page="scheduleParams.page"
                     :page-size="scheduleParams.rows" :page-count="6"
                     :total="scheduleTotal" @current-change="searchSchedulePage"></el-pagination>
    </el-dialog>

    <el-dialog desc="日常任务编辑弹框" :visible="showMergeDialog" width="500px" @close="showMergeDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">{{opTitle}}</div>

      <el-form ref="scheduleRuleForm" label-position="left" label-width="150px" :model="scheduleFormData"
               :rules="scheduleRules">
        <el-form-item label="名称：" prop="name">
          <el-input v-model.trim="scheduleFormData.name" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="类型：" prop="type">
          <el-select v-model="scheduleFormData.type" placeholder="请选择类型" style="width:300px;">
            <el-option
              v-for="item in scheduleTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活跃度：" prop="score">
          <el-input-number v-model="scheduleFormData.score" :min="0" :max="3000" :step="10"
                           style="width:300px;"></el-input-number>
        </el-form-item>
        <el-form-item label="元气值：" prop="energy">
          <el-input-number v-model="scheduleFormData.energy" :min="0" :max="3000" :step="10"
                           style="width:300px;"></el-input-number>
        </el-form-item>
        <el-form-item label="元气获取次数：" prop="week_count_energy">
          <el-input-number v-model="scheduleFormData.week_count_energy" :min="1" :max="100"
                           style="width:300px;"></el-input-number>
        </el-form-item>
        <el-form-item label="完成时间（min）：" prop="time">
          <el-input-number v-model="scheduleFormData.time" :min="1" :max="720" style="width:300px;"></el-input-number>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input v-model.trim="scheduleFormData.remark" type="textarea"
                    :rows="2" style="width:300px;" :maxlength="200" show-word-limit></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="showMergeDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveSchedule">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog desc="周任务规划弹框" :visible="showWeekScheduleDialog" width="1300px" @close="showWeekScheduleDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">周任务规划</div>

      <div style="margin:10px 0;display:flex;justify-content: space-between;">
        <el-button type="primary" @click="bindSchedule">绑定日常任务</el-button>
        <el-button type="primary" @click="openCreateWeekScheduleTemplate">创建</el-button>
      </div>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="第一天" name="第一天">
          <el-table :data="bindWeekSchedule1" border>
            <el-table-column label="名称" prop="name" min-width="200"></el-table-column>
            <el-table-column label="类型" prop="type" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.type === 1">PVP</span>
                <span v-if="scope.row.type === 2">PVE</span>
                <span v-if="scope.row.type === 3">PVX</span>
                <span v-if="scope.row.type === 4">其他</span>
              </template>
            </el-table-column>
            <el-table-column label="活跃度" prop="score" width="100"></el-table-column>
            <el-table-column label="元气值" prop="energy" width="100"></el-table-column>
            <el-table-column label="完成时间min" prop="time" width="120"></el-table-column>
            <el-table-column label="操作" prop="op" width="200" align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="removeSchedule(scope.row.id, 1)">移出</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="第二天" name="第二天">
          <el-table :data="bindWeekSchedule2" border>
            <el-table-column label="名称" prop="name" min-width="200"></el-table-column>
            <el-table-column label="类型" prop="type" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.type === 1">PVP</span>
                <span v-if="scope.row.type === 2">PVE</span>
                <span v-if="scope.row.type === 3">PVX</span>
                <span v-if="scope.row.type === 4">其他</span>
              </template>
            </el-table-column>
            <el-table-column label="活跃度" prop="score" width="100"></el-table-column>
            <el-table-column label="元气值" prop="energy" width="100"></el-table-column>
            <el-table-column label="完成时间min" prop="time" width="120"></el-table-column>
            <el-table-column label="操作" prop="op" width="200" align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="removeSchedule(scope.row.id, 2)">移出</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="第三天" name="第三天">
          <el-table :data="bindWeekSchedule3" border>
            <el-table-column label="名称" prop="name" min-width="200"></el-table-column>
            <el-table-column label="类型" prop="type" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.type === 1">PVP</span>
                <span v-if="scope.row.type === 2">PVE</span>
                <span v-if="scope.row.type === 3">PVX</span>
                <span v-if="scope.row.type === 4">其他</span>
              </template>
            </el-table-column>
            <el-table-column label="活跃度" prop="score" width="100"></el-table-column>
            <el-table-column label="元气值" prop="energy" width="100"></el-table-column>
            <el-table-column label="完成时间min" prop="time" width="120"></el-table-column>
            <el-table-column label="操作" prop="op" width="200" align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="removeSchedule(scope.row.id, 3)">移出</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="第四天" name="第四天">
          <el-table :data="bindWeekSchedule4" border>
            <el-table-column label="名称" prop="name" min-width="200"></el-table-column>
            <el-table-column label="类型" prop="type" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.type === 1">PVP</span>
                <span v-if="scope.row.type === 2">PVE</span>
                <span v-if="scope.row.type === 3">PVX</span>
                <span v-if="scope.row.type === 4">其他</span>
              </template>
            </el-table-column>
            <el-table-column label="活跃度" prop="score" width="100"></el-table-column>
            <el-table-column label="元气值" prop="energy" width="100"></el-table-column>
            <el-table-column label="完成时间min" prop="time" width="120"></el-table-column>
            <el-table-column label="操作" prop="op" width="200" align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="removeSchedule(scope.row.id, 4)">移出</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="第五天" name="第五天">
          <el-table :data="bindWeekSchedule5" border>
            <el-table-column label="名称" prop="name" min-width="200"></el-table-column>
            <el-table-column label="类型" prop="type" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.type === 1">PVP</span>
                <span v-if="scope.row.type === 2">PVE</span>
                <span v-if="scope.row.type === 3">PVX</span>
                <span v-if="scope.row.type === 4">其他</span>
              </template>
            </el-table-column>
            <el-table-column label="活跃度" prop="score" width="100"></el-table-column>
            <el-table-column label="元气值" prop="energy" width="100"></el-table-column>
            <el-table-column label="完成时间min" prop="time" width="120"></el-table-column>
            <el-table-column label="操作" prop="op" width="200" align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="removeSchedule(scope.row.id, 5)">移出</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="第六天" name="第六天">
          <el-table :data="bindWeekSchedule6" border>
            <el-table-column label="名称" prop="name" min-width="200"></el-table-column>
            <el-table-column label="类型" prop="type" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.type === 1">PVP</span>
                <span v-if="scope.row.type === 2">PVE</span>
                <span v-if="scope.row.type === 3">PVX</span>
                <span v-if="scope.row.type === 4">其他</span>
              </template>
            </el-table-column>
            <el-table-column label="活跃度" prop="score" width="100"></el-table-column>
            <el-table-column label="元气值" prop="energy" width="100"></el-table-column>
            <el-table-column label="完成时间min" prop="time" width="120"></el-table-column>
            <el-table-column label="操作" prop="op" width="200" align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="removeSchedule(scope.row.id, 6)">移出</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="第七天" name="第七天">
          <el-table :data="bindWeekSchedule7" border>
            <el-table-column label="名称" prop="name" min-width="200"></el-table-column>
            <el-table-column label="类型" prop="type" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.type === 1">PVP</span>
                <span v-if="scope.row.type === 2">PVE</span>
                <span v-if="scope.row.type === 3">PVX</span>
                <span v-if="scope.row.type === 4">其他</span>
              </template>
            </el-table-column>
            <el-table-column label="活跃度" prop="score" width="100"></el-table-column>
            <el-table-column label="元气值" prop="energy" width="100"></el-table-column>
            <el-table-column label="完成时间min" prop="time" width="120"></el-table-column>
            <el-table-column label="操作" prop="op" width="200" align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="removeSchedule(scope.row.id, 7)">移出</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <el-dialog desc="创建周任务规划弹框" :visible="showCreateWeekScheduleDialog" width="450px"
               @close="showCreateWeekScheduleDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">创建周任务规划</div>

      <el-form ref="weekScheduleRuleForm" label-position="left" label-width="100px" :model="weekScheduleFormData"
               :rules="weekScheduleRules">
        <el-form-item label="规划名称：" prop="name">
          <el-input v-model.trim="weekScheduleFormData.name" style="width:300px;"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="showCreateWeekScheduleDialog = false">取 消</el-button>
        <el-button type="primary" @click="createWeekScheduleTemplate">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog desc="绑定日常任务弹框" :visible="showBindScheduleDialog" width="1200px"
               @close="showBindScheduleDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">绑定日常任务</div>
      <div style="float:left;margin:10px 0;">
        <el-input v-model.trim="scheduleParams.keyword" placeholder="模板名称" clearable style="width:200px;"
                  @keyup.enter.native="searchSchedule"></el-input>
        <el-button type="primary" @click="searchSchedule">搜索</el-button>
        <el-button type="primary" @click="confirmBindSchedule" style="margin-left: 50px;">绑定</el-button>
      </div>

      <el-table :data="scheduleTableData" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="名称" prop="name" min-width="200"></el-table-column>
        <el-table-column label="类型" prop="type" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 1">PVP</span>
            <span v-if="scope.row.type === 2">PVE</span>
            <span v-if="scope.row.type === 3">PVX</span>
            <span v-if="scope.row.type === 4">其他</span>
          </template>
        </el-table-column>
        <el-table-column label="活跃度" prop="score" width="100"></el-table-column>
        <el-table-column label="元气值" prop="energy" width="100"></el-table-column>
        <el-table-column label="获取次数" prop="week_count_energy" width="100"></el-table-column>
        <el-table-column label="完成时间min" prop="time" width="120"></el-table-column>
        <el-table-column label="状态" prop="status" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1" class="enable-status">启用</span>
            <span v-if="scope.row.status === 0" class="disable-status">停用</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" min-width="120">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.remark" placement="top">
              <span class="ellipsis">{{scope.row.remark}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination layout="prev, pager, next" :current-page="scheduleParams.page"
                     :page-size="scheduleParams.rows" :page-count="6"
                     :total="scheduleTotal" @current-change="searchSchedulePage"></el-pagination>
    </el-dialog>

    <el-dialog desc="周任务规划弹框" :visible="showIntroduceScheduleDialog" width="1000px"
               @close="showIntroduceScheduleDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">周任务规划(双击引入)</div>
      <div style="float:left;margin:10px 0;">
        <el-button type="primary" @click="scheduleTemplateManage">创建</el-button>
        <el-button type="warning" @click="clearSchedule" style="margin-left:30px;">引用清空</el-button>
      </div>

      <el-table :data="weekScheduleList" border @row-dblclick="handleDblClick">
        <el-table-column label="名称" prop="name" min-width="200"></el-table-column>
        <el-table-column label="周总活跃度" prop="total_score" width="150"></el-table-column>
        <el-table-column label="周总元气值" prop="total_energy" width="150"></el-table-column>
        <el-table-column label="周总完成时间min" prop="total_time" width="150"></el-table-column>
        <el-table-column label="操作" prop="op" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="delWeekSchedule(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog desc="本周日程预览弹框" top="10vh" :visible="showViewCurrentWeekScheduleDialog" width="1200px"
               @close="showViewCurrentWeekScheduleDialog = false">
      <div slot="title" style="text-align: left;font-size: 20px;">本周日程预览</div>

      <div style="font-size: 24px;">
        <span style="color:#1471ff;">S:[ {{viewCurrentWeekTotal.E}} ] </span>
        <span style="color:#16bc0a;">E:[ {{viewCurrentWeekTotal.S}} ] </span>
        <span style="color:red;">T:[ {{getTime(viewCurrentWeekTotal.T)}} ]</span>
      </div>

      <el-table :data="viewCurrentWeekScheduleData" :span-method="weekScheduleSpanMethod" border
                :row-class-name="tableRowClassName">
        <el-table-column label="日期" prop="day" width="100"></el-table-column>
        <el-table-column label="总活跃度" prop="total_score" width="100"></el-table-column>
        <el-table-column label="总元气值" prop="total_energy" width="100"></el-table-column>
        <el-table-column label="总完成时间min" prop="total_time" width="140"></el-table-column>
        <el-table-column label="名称" prop="name" min-width="200"></el-table-column>
        <el-table-column label="类型" prop="type" width="60">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 1">PVP</span>
            <span v-if="scope.row.type === 2">PVE</span>
            <span v-if="scope.row.type === 3">PVX</span>
            <span v-if="scope.row.type === 4">其他</span>
          </template>
        </el-table-column>
        <el-table-column label="活跃度" prop="score" width="80"></el-table-column>
        <el-table-column label="元气值" prop="energy" width="80"></el-table-column>
        <el-table-column label="获取次数" prop="week_count_energy" width="80"></el-table-column>
        <el-table-column label="完成时间min" prop="time" width="120"></el-table-column>
      </el-table>
    </el-dialog>

  </el-card>
</template>

<script>
    import dateUtil from '../../../libs/dateUtil';
    import api from '../../../utils/api';

    export default {
        name: "ScheduleManage",
        data() {
            return {
                // 纯日历
                currentDate: dateUtil.getCurrentMonth(),
                currentMonth: 1,
                currentDay: dateUtil.getCurrentDate(),
                weekSchedules: [],
                monthData: [],

                // 创建赛季周
                showSeasonWeekDialog: false,
                formData: {},
                rules: {
                    season: [
                        {required: true, message: '请输入赛季名称', trigger: 'blur'}
                    ],
                    day: [
                        {required: true, message: '请选择日期', trigger: 'change'}
                    ],
                    count: [
                        {required: true, type: 'number', message: '请输入周数', trigger: 'blur'}
                    ],
                },


                // 日常任务管理
                showScheduleModal: false,
                scheduleParams: {
                    rows: 10,
                    page: 1,
                    keyword: '',
                },
                scheduleTableData: [],
                scheduleTotal: 0,
                showMergeDialog: false,
                scheduleTypeList: [
                    {label: 'PVP', value: 1},
                    {label: 'PVE', value: 2},
                    {label: 'PVX', value: 3},
                    {label: '其他', value: 4}
                ],
                opType: 1,//1新增 2编辑 3详情
                opTitle: '',
                scheduleFormData: {},
                scheduleRules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请选择类型', trigger: 'change'}
                    ],
                    score: [
                        {required: true, type: 'number', message: '请输入活跃度'}
                    ],
                    energy: [
                        {required: true, type: 'number', message: '请输入元气值'}
                    ],
                    week_count_energy: [
                        {required: true, type: 'number', message: '请输入元气获取次数'}
                    ],
                },


                //周任务规划
                showWeekScheduleDialog: false,
                activeName: '第一天',
                bindWeekSchedule1: [],
                bindWeekSchedule2: [],
                bindWeekSchedule3: [],
                bindWeekSchedule4: [],
                bindWeekSchedule5: [],
                bindWeekSchedule6: [],
                bindWeekSchedule7: [],
                //绑定日常任务弹框
                showBindScheduleDialog: false,
                multipleSelection: [],
                //创建周任务规划
                showCreateWeekScheduleDialog: false,
                weekScheduleFormData: {},
                weekScheduleRules: {
                    name: [
                        {required: true, message: '请输入规划名称', trigger: 'blur'}
                    ],
                },
                //引入周任务规划
                showIntroduceScheduleDialog: false,
                weekScheduleList: [],
                calendarData: {
                    initData: [],//接口原有数据
                    name: '',
                    schedule: {
                        day: '',
                        total_energy: 0,
                        total_score: 0,
                        total_time: 0,
                        schedules: []
                    }
                },

                // 本周日程预览
                showViewCurrentWeekScheduleDialog: false,
                viewCurrentWeekScheduleData: [],
                viewCurrentWeekTotal: {
                    S: 0,
                    E: 0,
                    T: 0
                },
                countMixIndexList: [],

            }
        },
        methods: {
            // 根据字符串截取获取年份
            getYear() {
                return this.currentDate.substr(0, 4);
            },
            // 根据字符串截取获取月份
            getMonth() {
                return this.currentDate.substr(5, 2);
            },
            // 根据min转换h:min
            getTime(val) {
                let h = Math.floor(val / 60);
                let hourContent = "",minContent = "";

                if (h == 0) {
                    hourContent = '0:';
                    minContent = val;
                } else {
                    let min = val - h * 60;
                    hourContent = h + ':';
                    minContent = min;
                }
                if(minContent < 10){
                    minContent = "0" + minContent;
                }
                return hourContent + minContent;
            },
            // 初始化月份表格数据
            initMonth() {
                // 加载数据，月 模式
                this.monthData = [];
                // 构建当前可看月份数据
                //1.确定月份
                let currentWeek = dateUtil.getWeekByDate(dateUtil.parseDate(this.currentDay));
                const currentYear = this.currentDate.substr(0, 4);
                const currentMonth = this.currentDate.substr(5, 6);
                const currentMonthDays = new Date(currentYear, currentMonth, 0).getDate();
                // 2.构建月份下的所有日
                if (currentWeek) {
                    let monthData = [];
                    // 获取日和周几对应关系
                    let row = 1;
                    for (let day = 1; day <= currentMonthDays; day++) {
                        let dateItem = currentYear + "-" + currentMonth + "-" + (day < 10 ? '0' + day : day);
                        let weekItem = dateUtil.getWeekByDate(dateUtil.parseDate(dateItem));
                        monthData.push({
                            row: row,               //行数，总固定6行
                            week: weekItem,         //周几，1-7对应周一到周日
                            day: dateItem,          //日期，格式：yyyy-MM-dd
                            isCurrent: true         //包含当前月/年数据
                        });
                        if (weekItem == 7) row++;    //如果执行到周日则增加行数
                    }
                    // 再次封装，以表格形式展示
                    for (let i = 1; i < 7; i++) {
                        let Mon = '', Tue = '', Wed = '', Thu = '', Fri = '', Sat = '', Sun = '', isCurrent = false;
                        for (let j = 0; j < monthData.length; j++) {
                            if (monthData[j].row == i) {
                                if (monthData[j].week == 1) Mon = j + 1;
                                if (monthData[j].week == 2) Tue = j + 1;
                                if (monthData[j].week == 3) Wed = j + 1;
                                if (monthData[j].week == 4) Thu = j + 1;
                                if (monthData[j].week == 5) Fri = j + 1;
                                if (monthData[j].week == 6) Sat = j + 1;
                                if (monthData[j].week == 7) Sun = j + 1;
                                if (monthData[j].isCurrent) isCurrent = true;
                            }
                        }
                        this.monthData.push({
                            Mon: Mon,
                            Tue: Tue,
                            Wed: Wed,
                            Thu: Thu,
                            Fri: Fri,
                            Sat: Sat,
                            Sun: Sun,
                            isCurrent: isCurrent
                        })
                    }
                    // 填充未填写的内容
                    // 填充第一行（若第一行的周一没有值时，执行）
                    if (!this.monthData[0].Mon) {
                        // 获取本月的第一天
                        let firstDayOfMonth = dateUtil.getFirstDayOfMonth(dateUtil.parseDate(this.currentDay));
                        let weekOfFirstDay = dateUtil.getWeekByDate(dateUtil.parseDate(firstDayOfMonth));
                        // 若第一天是周一，则不需要填充
                        if (weekOfFirstDay == 2) {
                            this.monthData[0].Mon = dateUtil.getDateAddDays(firstDayOfMonth, -1).getDate();
                        }
                        if (weekOfFirstDay == 3) {
                            this.monthData[0].Mon = dateUtil.getDateAddDays(firstDayOfMonth, -2).getDate();
                            this.monthData[0].Tue = dateUtil.getDateAddDays(firstDayOfMonth, -1).getDate();
                        }
                        if (weekOfFirstDay == 4) {
                            this.monthData[0].Mon = dateUtil.getDateAddDays(firstDayOfMonth, -3).getDate();
                            this.monthData[0].Tue = dateUtil.getDateAddDays(firstDayOfMonth, -2).getDate();
                            this.monthData[0].Wed = dateUtil.getDateAddDays(firstDayOfMonth, -1).getDate();
                        }
                        if (weekOfFirstDay == 5) {
                            this.monthData[0].Mon = dateUtil.getDateAddDays(firstDayOfMonth, -4).getDate();
                            this.monthData[0].Tue = dateUtil.getDateAddDays(firstDayOfMonth, -3).getDate();
                            this.monthData[0].Wed = dateUtil.getDateAddDays(firstDayOfMonth, -2).getDate();
                            this.monthData[0].Thu = dateUtil.getDateAddDays(firstDayOfMonth, -1).getDate();
                        }
                        if (weekOfFirstDay == 6) {
                            this.monthData[0].Mon = dateUtil.getDateAddDays(firstDayOfMonth, -5).getDate();
                            this.monthData[0].Tue = dateUtil.getDateAddDays(firstDayOfMonth, -4).getDate();
                            this.monthData[0].Wed = dateUtil.getDateAddDays(firstDayOfMonth, -3).getDate();
                            this.monthData[0].Thu = dateUtil.getDateAddDays(firstDayOfMonth, -2).getDate();
                            this.monthData[0].Fri = dateUtil.getDateAddDays(firstDayOfMonth, -1).getDate();
                        }
                        if (weekOfFirstDay == 7) {
                            this.monthData[0].Mon = dateUtil.getDateAddDays(firstDayOfMonth, -6).getDate();
                            this.monthData[0].Tue = dateUtil.getDateAddDays(firstDayOfMonth, -5).getDate();
                            this.monthData[0].Wed = dateUtil.getDateAddDays(firstDayOfMonth, -4).getDate();
                            this.monthData[0].Thu = dateUtil.getDateAddDays(firstDayOfMonth, -3).getDate();
                            this.monthData[0].Fri = dateUtil.getDateAddDays(firstDayOfMonth, -2).getDate();
                            this.monthData[0].Sat = dateUtil.getDateAddDays(firstDayOfMonth, -1).getDate();
                        }
                    }
                    // 填充第五行（若第五行的周日没有值时，执行）
                    // 获取本月的最后一天
                    let lastDayOfMonth = dateUtil.getCurrentMonthLast(dateUtil.parseDate(this.currentDay));
                    let weekOfLastDay = dateUtil.getWeekByDate(dateUtil.parseDate(lastDayOfMonth));
                    if (!this.monthData[4].Sun) {
                        // 若是平年的2月，28日=4*7,第五行将没有值，填充需考虑所有
                        if (weekOfLastDay == 7) {
                            this.monthData[4].Mon = dateUtil.getDateAddDays(lastDayOfMonth, 1).getDate();
                            this.monthData[4].Tue = dateUtil.getDateAddDays(lastDayOfMonth, 2).getDate();
                            this.monthData[4].Wed = dateUtil.getDateAddDays(lastDayOfMonth, 3).getDate();
                            this.monthData[4].Thu = dateUtil.getDateAddDays(lastDayOfMonth, 4).getDate();
                            this.monthData[4].Fri = dateUtil.getDateAddDays(lastDayOfMonth, 5).getDate();
                            this.monthData[4].Sat = dateUtil.getDateAddDays(lastDayOfMonth, 6).getDate();
                            this.monthData[4].Sun = dateUtil.getDateAddDays(lastDayOfMonth, 7).getDate();
                        }
                        if (weekOfLastDay == 1) {
                            this.monthData[4].Tue = dateUtil.getDateAddDays(lastDayOfMonth, 1).getDate();
                            this.monthData[4].Wed = dateUtil.getDateAddDays(lastDayOfMonth, 2).getDate();
                            this.monthData[4].Thu = dateUtil.getDateAddDays(lastDayOfMonth, 3).getDate();
                            this.monthData[4].Fri = dateUtil.getDateAddDays(lastDayOfMonth, 4).getDate();
                            this.monthData[4].Sat = dateUtil.getDateAddDays(lastDayOfMonth, 5).getDate();
                            this.monthData[4].Sun = dateUtil.getDateAddDays(lastDayOfMonth, 6).getDate();
                        }
                        if (weekOfLastDay == 2) {
                            this.monthData[4].Wed = dateUtil.getDateAddDays(lastDayOfMonth, 1).getDate();
                            this.monthData[4].Thu = dateUtil.getDateAddDays(lastDayOfMonth, 2).getDate();
                            this.monthData[4].Fri = dateUtil.getDateAddDays(lastDayOfMonth, 3).getDate();
                            this.monthData[4].Sat = dateUtil.getDateAddDays(lastDayOfMonth, 4).getDate();
                            this.monthData[4].Sun = dateUtil.getDateAddDays(lastDayOfMonth, 5).getDate();
                        }
                        if (weekOfLastDay == 3) {
                            this.monthData[4].Thu = dateUtil.getDateAddDays(lastDayOfMonth, 1).getDate();
                            this.monthData[4].Fri = dateUtil.getDateAddDays(lastDayOfMonth, 2).getDate();
                            this.monthData[4].Sat = dateUtil.getDateAddDays(lastDayOfMonth, 3).getDate();
                            this.monthData[4].Sun = dateUtil.getDateAddDays(lastDayOfMonth, 4).getDate();
                        }
                        if (weekOfLastDay == 4) {
                            this.monthData[4].Fri = dateUtil.getDateAddDays(lastDayOfMonth, 1).getDate();
                            this.monthData[4].Sat = dateUtil.getDateAddDays(lastDayOfMonth, 2).getDate();
                            this.monthData[4].Sun = dateUtil.getDateAddDays(lastDayOfMonth, 3).getDate();
                        }
                        if (weekOfLastDay == 5) {
                            this.monthData[4].Sat = dateUtil.getDateAddDays(lastDayOfMonth, 1).getDate();
                            this.monthData[4].Sun = dateUtil.getDateAddDays(lastDayOfMonth, 2).getDate();
                        }
                        if (weekOfLastDay == 6) {
                            this.monthData[4].Sun = dateUtil.getDateAddDays(lastDayOfMonth, 1).getDate();
                        }
                    }
                    // 填充第六行（总是执行，根据最后一行的值执行）
                    // 若仅有5行数据（简单根据前面的数值填充）
                    if (!this.monthData[5].Mon) {
                        // 不是由代码自动填充的情况，下一行将1开始
                        let frontDate = this.monthData[4].Sun > 27 ? 0 : this.monthData[4].Sun;
                        this.monthData[5].Mon = frontDate + 1;
                        this.monthData[5].Tue = frontDate + 2;
                        this.monthData[5].Wed = frontDate + 3;
                        this.monthData[5].Thu = frontDate + 4;
                        this.monthData[5].Fri = frontDate + 5;
                        this.monthData[5].Sat = frontDate + 6;
                        this.monthData[5].Sun = frontDate + 7;
                    } else {
                        // 若已有6行数据（根据最后一行的值执行，周一必然有值，从周二开始填充）
                        // 因为一月最多有31天，最多排到第六行的周二
                        if (weekOfLastDay == 1) {
                            this.monthData[5].Tue = 1;
                            this.monthData[5].Wed = 2;
                            this.monthData[5].Thu = 3;
                            this.monthData[5].Fri = 4;
                            this.monthData[5].Sat = 5;
                            this.monthData[5].Sun = 6;
                        }
                        if (weekOfLastDay == 2) {
                            this.monthData[5].Wed = 1;
                            this.monthData[5].Thu = 2;
                            this.monthData[5].Fri = 3;
                            this.monthData[5].Sat = 4;
                            this.monthData[5].Sun = 5;
                        }
                        // if (weekOfLastDay == 3) {
                        //     this.monthData[5].Thu = 1;
                        //     this.monthData[5].Fri = 2;
                        //     this.monthData[5].Sat = 3;
                        //     this.monthData[5].Sun = 4;
                        // }
                        // if (weekOfLastDay == 4) {
                        //     this.monthData[5].Fri = 1;
                        //     this.monthData[5].Sat = 2;
                        //     this.monthData[5].Sun = 3;
                        // }
                        // if (weekOfLastDay == 5) {
                        //     this.monthData[5].Sat = 1;
                        //     this.monthData[5].Sun = 2;
                        // }
                        // if (weekOfLastDay == 6) {
                        //     this.monthData[5].Sun = 1;
                        // }
                    }
                    // 增加选中日的样式
                    this.selectCalendarDate();
                } else {
                    this.$alert("构建日历异常", '失败!');
                }
            },
            // 增加选中日/月的样式
            selectCalendarDate() {
                // 获取日
                let day = dateUtil.parseDate(this.currentDay).getDate();
                // 获取日所属行、列key（如果是<15的日，可能会有下月的日数据重复，所以取第一个日的行数，跳出循环）
                let row = 0, columnKey = 0;
                for (let i = 0; i < 6; i++) {
                    if (this.monthData[i].isCurrent) {
                        if (this.monthData[i].Mon == day) {
                            row = i;
                            columnKey = 'Mon';
                            if (row == 0 && day < 8) {
                                break;
                            } else if (row > 0) {
                                break;
                            }
                        }
                        if (this.monthData[i].Tue == day) {
                            row = i;
                            columnKey = 'Tue';
                            if (row == 0 && day < 8) {
                                break;
                            } else if (row > 0) {
                                break;
                            }
                        }
                        if (this.monthData[i].Wed == day) {
                            row = i;
                            columnKey = 'Wed';
                            if (row == 0 && day < 8) {
                                break;
                            } else if (row > 0) {
                                break;
                            }
                        }
                        if (this.monthData[i].Thu == day) {
                            row = i;
                            columnKey = 'Thu';
                            if (row == 0 && day < 8) {
                                break;
                            } else if (row > 0) {
                                break;
                            }
                        }
                        if (this.monthData[i].Fri == day) {
                            row = i;
                            columnKey = 'Fri';
                            if (row == 0 && day < 8) {
                                break;
                            } else if (row > 0) {
                                break;
                            }
                        }
                        if (this.monthData[i].Sat == day) {
                            row = i;
                            columnKey = 'Sat';
                            if (row == 0 && day < 8) {
                                break;
                            } else if (row > 0) {
                                break;
                            }
                        }
                        if (this.monthData[i].Sun == day) {
                            row = i;
                            columnKey = 'Sun';
                            if (row == 0 && day < 8) {
                                break;
                            } else if (row > 0) {
                                break;
                            }
                        }
                    }
                }
            },
            // 设置非当前月的颜色
            setNotCurrentMonthColor(index, day) {
                // 第一行，日>7的值必然是上月的数据
                let color = '';
                if (index == 0 && day > 7) {
                    color = '#c0c4b6';
                }
                // 最后两行，日<15的值必然是上月的数据
                if (index >= 4 && day < 15) {
                    color = '#c0c4b6';
                }
                return color;
            },
            // 设置当前日的背景颜色
            setCurrentDayBackgroundColor(index, day, colItem) {
                // 肯定是本月的，锁定本月第一个数据
                // 1.剔除不是当前月的数据
                if (day < 15 && index >= 4) {
                    return;
                }
                if (day > 15 && index < 2) {
                    return;
                }
                // 2.选中本月的日期
                const currentDay = this.currentDay.substr(8, 10);
                for (let item in this.monthData) {
                    if (this.monthData[item][colItem] == currentDay && day == currentDay) {
                        return '#68c42e';
                    }
                }
            },
            // 日期翻滚、向前1月/年。翻滚完，默认选中1号
            back() {
                this.currentDate = dateUtil.getPreMonth(dateUtil.parseDate(this.currentDate));
                this.currentDay = dateUtil.formatDate(dateUtil.parseDate(this.currentDate), 'yyyy-MM-dd');
                this.initMonth();
            },
            // 回到今天
            backToday() {
                this.currentDate = dateUtil.getCurrentMonth();
                this.currentDay = dateUtil.getCurrentDate();
                this.initMonth();
            },
            // 日期翻滚、向后1月/年。翻滚完，默认选中1号
            forward() {
                this.currentDate = dateUtil.getNextMonth(dateUtil.parseDate(this.currentDate));
                this.currentDay = dateUtil.formatDate(dateUtil.parseDate(this.currentDate), 'yyyy-MM-dd');
                this.initMonth();
            },
            // 单元格点击事件。更改选中样式
            cellClick(row, column, cell, event) {
                let clickDay = row[column.property];
                let rowIndex = row.index;
                this.getDateByMonthModeTable(rowIndex, clickDay);
                this.currentDate = this.currentDay.substr(0, 7);
                // 重新加载，实现更改样式[翻到指定的月份]
                this.initMonth();

                // 获取日历计划数据
                this.getScheduleData(this.calendarData.name);
            },
            // 获取日历计划数据
            getScheduleData(name) {
                if (!name) {
                    return;
                }
                this.clearSchedule();
                var that = this;
                api.ajax.get('schedule/get/week/' + that.currentDay + '/' + name)
                    .then((result) => {
                        if (result.status == 200) {
                            let data = result.data;
                            that.calendarData.initData = data;
                            // 渲染右侧选中日期的任务
                            for (let item in data) {
                                if (data[item].day == that.currentDay) {
                                    that.calendarData.name = data[item].name;
                                    that.calendarData.schedule = data[item];
                                    break;
                                }
                            }
                        } else {
                            that.$message(result.msg);
                        }
                    }, (result) => {
                        that.$alert("创建异常", '失败!');
                    })
            },
            /**
             * 根据按月查看模式的表格参数获取准确日期
             * 解决表格内有重复的day数据
             * @param index 表格行索引
             * @param day   日
             */
            getDateByMonthModeTable(index, day) {
                // 第一行上月的日期数据
                if (index == 0 && day > 7) {
                    let preMonth = dateUtil.getPreMonth(dateUtil.parseDate(this.currentDate));
                    this.currentDay = preMonth + '-' + (day < 10 ? ('0' + day) : day);
                    return;
                }
                // 第五行下月的日期数据
                if (index >= 4 && day < 15) {
                    let nextMonth = dateUtil.getNextMonth(dateUtil.parseDate(this.currentDate));
                    this.currentDay = nextMonth + '-' + (day < 10 ? ('0' + day) : day);
                    return;
                }
                // 其他日处理
                this.currentDay = this.currentDate + '-' + (day < 10 ? ('0' + day) : day);
            },
            // 设置标题样式
            headerClass({row, rowIndex}) {
                return 'headerClass';
            },
            // 将行索引存入进对象
            rowClass({row, rowIndex}) {
                row.index = rowIndex;
            },
            // 设置单元格样式
            cellClass({row, rowIndex}) {
                return 'cellClass';
            },


            // 日常任务管理
            createSeasonWeek() {
                this.showSeasonWeekDialog = true;
                this.formData = {
                    season: '',
                    count: 26,
                    day: dateUtil.getNowDate() // 默认当天
                }
            },
            create() {
                var that = this;
                this.$refs["ruleForm"].validate((valid) => {
                    if (valid) {
                        api.ajax.post('schedule/create', that.formData)
                            .then((result) => {
                                if (result.status == 200) {
                                    that.$message.success('创建成功');
                                    that.showSeasonWeekDialog = false;
                                } else {
                                    that.$message(result.msg);
                                }
                            }, (result) => {
                                that.$alert("创建异常", '失败!');
                            })
                    }
                })
            },
            scheduleManage() {
                this.showScheduleModal = true;
                this.scheduleParams.keyword = '';
                this.searchSchedule();
            },
            searchSchedule() {
                this.scheduleParams.page = 1;
                this.searchSchedulePage(1);
            },
            searchSchedulePage(page) {
                var that = this;
                that.scheduleParams.page = page;
                that.scheduleTableData = [];
                that.scheduleTotal = 0;
                api.ajax.get('/schedule/page/' + that.scheduleParams.rows + '/' + that.scheduleParams.page + '?keyword=' + that.scheduleParams.keyword).then((result) => {
                    var data = result.data;
                    that.scheduleTableData = data.list;
                    that.scheduleTotal = data.total;
                }, function (result) {
                    that.$alert("获取日常任务异常", '失败!');
                })
            },
            addSchedule() {
                this.opType = 1;
                this.opTitle = '新增';
                this.scheduleFormData = {
                    name: '',
                    type: 1,
                    score: 10,
                    energy: 10,
                    week_count_energy: 1,
                    time: 1,
                    remark: ''
                };
                this.showMergeDialog = true;
            },
            editSchedule(row) {
                this.opType = 2;
                this.opTitle = '编辑';
                this.scheduleFormData = {
                    id: row.id,
                    name: row.name,
                    type: row.type,
                    score: row.score,
                    energy: row.energy,
                    week_count_energy: row.week_count_energy,
                    time: row.time,
                    remark: row.remark
                };
                this.showMergeDialog = true;
            },
            saveSchedule() {
                var that = this;
                this.$refs["scheduleRuleForm"].validate((valid) => {
                    if (valid) {
                        if (this.opType === 1) {
                            api.ajax.post('schedule/add', that.scheduleFormData)
                                .then((result) => {
                                    if (result.status == 200) {
                                        that.$message.success('新增成功');
                                        that.showMergeDialog = false;
                                        that.searchSchedule();
                                    } else {
                                        that.$message(result.msg);
                                    }
                                }, (result) => {
                                    that.$alert("新增异常", '失败!');
                                })
                        } else {
                            api.ajax.post('schedule/update', that.scheduleFormData)
                                .then((result) => {
                                    if (result.status == 200) {
                                        that.$message.success('修改成功');
                                        that.showMergeDialog = false;
                                        that.searchSchedule();
                                    } else {
                                        that.$message(result.msg);
                                    }
                                }, (result) => {
                                    that.$alert("修改异常", '失败!');
                                })
                        }
                    } else {
                        return false;
                    }
                });
            },
            updateStatus(id, status) {
                var that = this;
                api.ajax.post('/schedule/update/' + id + '/' + status).then((result) => {
                    that.searchSchedule();
                    let content = status === 0 ? '停用' : '启用';
                    that.$message.success(content + '成功');
                }, function (result) {
                    that.$alert("修改状态异常", '失败!');
                })
            },
            // 打开周任务规划弹框
            scheduleTemplateManage() {
                this.activeName = '第一天';
                this.bindWeekSchedule1 = [];
                this.bindWeekSchedule2 = [];
                this.bindWeekSchedule3 = [];
                this.bindWeekSchedule4 = [];
                this.bindWeekSchedule5 = [];
                this.bindWeekSchedule6 = [];
                this.bindWeekSchedule7 = [];
                this.bindWeekSchedule7 = [];
                this.showWeekScheduleDialog = true;
            },
            // 打开绑定日常任务弹框
            bindSchedule() {
                this.showBindScheduleDialog = true;
                this.multipleSelection = [];
                this.scheduleParams.keyword = '';
                this.searchSchedule();
            },
            // 切换周任务规划tab
            handleClick(tab) {
                this.activeName = tab.name;
            },
            // 打开创建周任务规划弹框
            openCreateWeekScheduleTemplate() {
                this.weekScheduleFormData = {
                    name: ''
                };
                this.showCreateWeekScheduleDialog = true;
            },
            // 选择日常任务列表事件
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 确定绑定日常任务
            confirmBindSchedule() {
                if (this.multipleSelection.length < 1) {
                    this.$message.error('请先选择日常任务');
                    return;
                }
                if (this.activeName == '第一天') {
                    let addArray = [];
                    for (let item in this.multipleSelection) {
                        let isExists = false;
                        for (let item2 in this.bindWeekSchedule1) {
                            if (this.multipleSelection[item].id == this.bindWeekSchedule1[item2].id) {
                                isExists = true;
                            }
                        }
                        if (!isExists) {
                            addArray.push(this.multipleSelection[item]);
                        }
                    }
                    this.bindWeekSchedule1.push(...addArray);
                } else if (this.activeName == '第二天') {
                    let addArray = [];
                    for (let item in this.multipleSelection) {
                        let isExists = false;
                        for (let item2 in this.bindWeekSchedule2) {
                            if (this.multipleSelection[item].id == this.bindWeekSchedule2[item2].id) {
                                isExists = true;
                            }
                        }
                        if (!isExists) {
                            addArray.push(this.multipleSelection[item]);
                        }
                    }
                    this.bindWeekSchedule2.push(...addArray);
                } else if (this.activeName == '第三天') {
                    let addArray = [];
                    for (let item in this.multipleSelection) {
                        let isExists = false;
                        for (let item2 in this.bindWeekSchedule3) {
                            if (this.multipleSelection[item].id == this.bindWeekSchedule3[item2].id) {
                                isExists = true;
                            }
                        }
                        if (!isExists) {
                            addArray.push(this.multipleSelection[item]);
                        }
                    }
                    this.bindWeekSchedule3.push(...addArray);
                } else if (this.activeName == '第四天') {
                    let addArray = [];
                    for (let item in this.multipleSelection) {
                        let isExists = false;
                        for (let item2 in this.bindWeekSchedule4) {
                            if (this.multipleSelection[item].id == this.bindWeekSchedule4[item2].id) {
                                isExists = true;
                            }
                        }
                        if (!isExists) {
                            addArray.push(this.multipleSelection[item]);
                        }
                    }
                    this.bindWeekSchedule4.push(...addArray);
                } else if (this.activeName == '第五天') {
                    let addArray = [];
                    for (let item in this.multipleSelection) {
                        let isExists = false;
                        for (let item2 in this.bindWeekSchedule5) {
                            if (this.multipleSelection[item].id == this.bindWeekSchedule5[item2].id) {
                                isExists = true;
                            }
                        }
                        if (!isExists) {
                            addArray.push(this.multipleSelection[item]);
                        }
                    }
                    this.bindWeekSchedule5.push(...addArray);
                } else if (this.activeName == '第六天') {
                    let addArray = [];
                    for (let item in this.multipleSelection) {
                        let isExists = false;
                        for (let item2 in this.bindWeekSchedule6) {
                            if (this.multipleSelection[item].id == this.bindWeekSchedule6[item2].id) {
                                isExists = true;
                            }
                        }
                        if (!isExists) {
                            addArray.push(this.multipleSelection[item]);
                        }
                    }
                    this.bindWeekSchedule6.push(...addArray);
                } else if (this.activeName == '第七天') {
                    let addArray = [];
                    for (let item in this.multipleSelection) {
                        let isExists = false;
                        for (let item2 in this.bindWeekSchedule7) {
                            if (this.multipleSelection[item].id == this.bindWeekSchedule7[item2].id) {
                                isExists = true;
                            }
                        }
                        if (!isExists) {
                            addArray.push(this.multipleSelection[item]);
                        }
                    }
                    this.bindWeekSchedule7.push(...addArray);
                }
                this.showBindScheduleDialog = false;
            },
            // 移出（解绑）日常任务
            removeSchedule(id, day) {
                let index = -1;
                if (day == 1) {
                    for (let i = 0; i < this.bindWeekSchedule1.length; i++) {
                        if (this.bindWeekSchedule1[i].id == id) {
                            index = i;
                        }
                    }
                    if (index > -1) {
                        this.bindWeekSchedule1.splice(index, 1);
                    }
                } else if (day == 2) {
                    for (let i = 0; i < this.bindWeekSchedule2.length; i++) {
                        if (this.bindWeekSchedule2[i].id == id) {
                            index = i;
                        }
                    }
                    if (index > -1) {
                        this.bindWeekSchedule2.splice(index, 1);
                    }
                } else if (day == 3) {
                    for (let i = 0; i < this.bindWeekSchedule3.length; i++) {
                        if (this.bindWeekSchedule3[i].id == id) {
                            index = i;
                        }
                    }
                    if (index > -1) {
                        this.bindWeekSchedule3.splice(index, 1);
                    }
                } else if (day == 4) {
                    for (let i = 0; i < this.bindWeekSchedule4.length; i++) {
                        if (this.bindWeekSchedule4[i].id == id) {
                            index = i;
                        }
                    }
                    if (index > -1) {
                        this.bindWeekSchedule4.splice(index, 1);
                    }
                } else if (day == 5) {
                    for (let i = 0; i < this.bindWeekSchedule5.length; i++) {
                        if (this.bindWeekSchedule5[i].id == id) {
                            index = i;
                        }
                    }
                    if (index > -1) {
                        this.bindWeekSchedule5.splice(index, 1);
                    }
                } else if (day == 6) {
                    for (let i = 0; i < this.bindWeekSchedule6.length; i++) {
                        if (this.bindWeekSchedule6[i].id == id) {
                            index = i;
                        }
                    }
                    if (index > -1) {
                        this.bindWeekSchedule6.splice(index, 1);
                    }
                } else if (day == 7) {
                    for (let i = 0; i < this.bindWeekSchedule7.length; i++) {
                        if (this.bindWeekSchedule7[i].id == id) {
                            index = i;
                        }
                    }
                    if (index > -1) {
                        this.bindWeekSchedule7.splice(index, 1);
                    }
                }
            },
            // 创建周任务规划
            createWeekScheduleTemplate() {
                var that = this;
                this.$refs["weekScheduleRuleForm"].validate((valid) => {
                    if (valid) {
                        let days = [];
                        if (this.bindWeekSchedule1.length > 0) {
                            let scheduleIds = [];
                            let totalScore = 0, totalEnergy = 0, totalTime = 0;
                            for (let item in this.bindWeekSchedule1) {
                                totalScore += this.bindWeekSchedule1[item].score;
                                totalEnergy += this.bindWeekSchedule1[item].energy;
                                totalTime += this.bindWeekSchedule1[item].time;
                                scheduleIds.push(this.bindWeekSchedule1[item].id);
                            }
                            days.push({
                                day: 1,
                                schedule_ids: scheduleIds.toString(),
                                total_score: totalScore,
                                total_energy: totalEnergy,
                                total_time: totalTime
                            })
                        }
                        if (this.bindWeekSchedule2.length > 0) {
                            let scheduleIds = [];
                            let totalScore = 0, totalEnergy = 0, totalTime = 0;
                            for (let item in this.bindWeekSchedule2) {
                                totalScore += this.bindWeekSchedule2[item].score;
                                totalEnergy += this.bindWeekSchedule2[item].energy;
                                totalTime += this.bindWeekSchedule2[item].time;
                                scheduleIds.push(this.bindWeekSchedule2[item].id);
                            }
                            days.push({
                                day: 2,
                                schedule_ids: scheduleIds.toString(),
                                total_score: totalScore,
                                total_energy: totalEnergy,
                                total_time: totalTime
                            })
                        }
                        if (this.bindWeekSchedule3.length > 0) {
                            let scheduleIds = [];
                            let totalScore = 0, totalEnergy = 0, totalTime = 0;
                            for (let item in this.bindWeekSchedule3) {
                                totalScore += this.bindWeekSchedule3[item].score;
                                totalEnergy += this.bindWeekSchedule3[item].energy;
                                totalTime += this.bindWeekSchedule3[item].time;
                                scheduleIds.push(this.bindWeekSchedule3[item].id);
                            }
                            days.push({
                                day: 3,
                                schedule_ids: scheduleIds.toString(),
                                total_score: totalScore,
                                total_energy: totalEnergy,
                                total_time: totalTime
                            })
                        }
                        if (this.bindWeekSchedule4.length > 0) {
                            let scheduleIds = [];
                            let totalScore = 0, totalEnergy = 0, totalTime = 0;
                            for (let item in this.bindWeekSchedule4) {
                                totalScore += this.bindWeekSchedule4[item].score;
                                totalEnergy += this.bindWeekSchedule4[item].energy;
                                totalTime += this.bindWeekSchedule4[item].time;
                                scheduleIds.push(this.bindWeekSchedule4[item].id);
                            }
                            days.push({
                                day: 4,
                                schedule_ids: scheduleIds.toString(),
                                total_score: totalScore,
                                total_energy: totalEnergy,
                                total_time: totalTime
                            })
                        }
                        if (this.bindWeekSchedule5.length > 0) {
                            let scheduleIds = [];
                            let totalScore = 0, totalEnergy = 0, totalTime = 0;
                            for (let item in this.bindWeekSchedule5) {
                                totalScore += this.bindWeekSchedule5[item].score;
                                totalEnergy += this.bindWeekSchedule5[item].energy;
                                totalTime += this.bindWeekSchedule5[item].time;
                                scheduleIds.push(this.bindWeekSchedule5[item].id);
                            }
                            days.push({
                                day: 5,
                                schedule_ids: scheduleIds.toString(),
                                total_score: totalScore,
                                total_energy: totalEnergy,
                                total_time: totalTime
                            })
                        }
                        if (this.bindWeekSchedule6.length > 0) {
                            let scheduleIds = [];
                            let totalScore = 0, totalEnergy = 0, totalTime = 0;
                            for (let item in this.bindWeekSchedule6) {
                                totalScore += this.bindWeekSchedule6[item].score;
                                totalEnergy += this.bindWeekSchedule6[item].energy;
                                totalTime += this.bindWeekSchedule6[item].time;
                                scheduleIds.push(this.bindWeekSchedule6[item].id);
                            }
                            days.push({
                                day: 6,
                                schedule_ids: scheduleIds.toString(),
                                total_score: totalScore,
                                total_energy: totalEnergy,
                                total_time: totalTime
                            })
                        }
                        if (this.bindWeekSchedule7.length > 0) {
                            let scheduleIds = [];
                            let totalScore = 0, totalEnergy = 0, totalTime = 0;
                            for (let item in this.bindWeekSchedule7) {
                                totalScore += this.bindWeekSchedule7[item].score;
                                totalEnergy += this.bindWeekSchedule7[item].energy;
                                totalTime += this.bindWeekSchedule7[item].time;
                                scheduleIds.push(this.bindWeekSchedule7[item].id);
                            }
                            days.push({
                                day: 7,
                                schedule_ids: scheduleIds.toString(),
                                total_score: totalScore,
                                total_energy: totalEnergy,
                                total_time: totalTime
                            })
                        }
                        let params = {
                            name: that.weekScheduleFormData.name,
                            days: days
                        }
                        api.ajax.post('schedule/week/create', params)
                            .then((result) => {
                                if (result.status == 200) {
                                    that.$message.success('创建周任务计划成功');
                                    that.showCreateWeekScheduleDialog = false;
                                    that.showWeekScheduleDialog = false;
                                    that.getWeekScheduleList();
                                    // 刷新日历任务内容
                                    that.getScheduleData();
                                } else {
                                    that.$message(result.msg);
                                }
                            }, (result) => {
                                that.$alert("创建周任务计划异常", '失败!');
                            })
                    } else {
                        return false;
                    }
                });
            },
            // 删除周任务规划
            delWeekSchedule(row) {
                var that = this;
                api.ajax.delete('/schedule/week/delete/' + row.name)
                    .then((result) => {
                        if (result.status == 200) {
                            that.$message.success('删除成功');
                            that.getWeekScheduleList();
                            that.clearSchedule();
                        } else {
                            that.$message(result.msg);
                        }
                    })
            },
            // 周任务规划
            introduceScheduleTemplateManage() {
                this.showIntroduceScheduleDialog = true;
                this.getWeekScheduleList();
            },
            getWeekScheduleList() {
                var that = this;
                api.ajax.get('/schedule/week/list').then((result) => {
                    that.weekScheduleList = result.data;
                }, function (result) {
                    that.$alert("获取周任务规划异常", '失败!');
                })
            },
            // 双击选中周任务规划，导入进日历
            handleDblClick(row, column, event) {
                this.calendarData = row;
                // 获取日历计划数据
                this.getScheduleData(row.name);
                this.showIntroduceScheduleDialog = false;
            },
            clearSchedule() {
                this.calendarData = {
                    name: '',
                    schedule: {
                        day: '',
                        total_energy: 0,
                        total_score: 0,
                        total_time: 0,
                        schedules: []
                    }
                };
                this.showIntroduceScheduleDialog = false;
            },
            // 本周日常一览
            viewCurrentWeekSchedule() {
                // 重新封装对象
                this.viewCurrentWeekScheduleData = [];
                this.viewCurrentWeekTotal = {
                    S: 0,
                    E: 0,
                    T: 0
                };
                for (let item of this.calendarData.initData) {
                    let schedules = item.schedules;

                    // 统计周消耗
                    this.viewCurrentWeekTotal.E = this.viewCurrentWeekTotal.E + item.total_energy;
                    this.viewCurrentWeekTotal.S = this.viewCurrentWeekTotal.S + item.total_score;
                    this.viewCurrentWeekTotal.T = this.viewCurrentWeekTotal.T + item.total_time;

                    for (let s of schedules) {
                        this.viewCurrentWeekScheduleData.push({
                            day: item.day,
                            total_score: item.total_score,
                            total_energy: item.total_energy,
                            total_time: item.total_time,

                            name: s.name,
                            type: s.type,
                            score: s.score,
                            energy: s.energy,
                            week_count_energy: s.week_count_energy,
                            time: s.time,
                        })
                    }
                }
                // 封裝合并表格对象
                let countMixIndexList = [];
                let dayName = '';
                for (let i = 1; i < this.viewCurrentWeekScheduleData.length; i++) {
                    if (dayName !== this.viewCurrentWeekScheduleData[i].day) {
                        dayName = this.viewCurrentWeekScheduleData[i].day;
                        if (countMixIndexList.length === 0) {
                            countMixIndexList.push({
                                start_index: 0,
                                end_index: i - 1,
                                length: i,
                            });
                        } else {
                            countMixIndexList.push({
                                start_index: countMixIndexList[countMixIndexList.length - 1].end_index + 1,
                                end_index: i - 1,
                                length: i - countMixIndexList[countMixIndexList.length - 1].end_index - 1,
                            });
                        }
                    }
                }
                // 特殊处理
                if (countMixIndexList.length > 0) {
                    countMixIndexList.push({
                        start_index: countMixIndexList[countMixIndexList.length - 1].end_index + 1,
                        end_index: this.viewCurrentWeekScheduleData.length - 1,
                        length: this.viewCurrentWeekScheduleData.length - countMixIndexList[countMixIndexList.length - 1].end_index - 1,
                    });
                } else {
                    countMixIndexList.push({
                        start_index: 0,
                        end_index: this.viewCurrentWeekScheduleData.length - 1,
                        length: this.viewCurrentWeekScheduleData.length,
                    });
                }
                this.countMixIndexList = countMixIndexList;

                this.showViewCurrentWeekScheduleDialog = true;
            },
            weekScheduleSpanMethod({row, column, rowIndex, columnIndex}) {
                if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3) {
                    for (let i = 0; i < this.countMixIndexList.length; i++) {
                        if (this.countMixIndexList[i].start_index === rowIndex && this.countMixIndexList[i].end_index >= rowIndex) {
                            return {
                                rowspan: this.countMixIndexList[i].length,
                                colspan: 1,
                            };
                        }
                        if (this.countMixIndexList[i].start_index < rowIndex && this.countMixIndexList[i].end_index >= rowIndex) {
                            return {
                                rowspan: 0,
                                colspan: 0,
                            };
                        }
                    }
                }
            },
            tableRowClassName({row, rowIndex}) {
                for (let i = 0; i < this.countMixIndexList.length; i++) {
                    if (this.countMixIndexList[i].start_index <= rowIndex && this.countMixIndexList[i].end_index >= rowIndex) {
                        if (i % 2 == 0) {
                            return 'warning-row';
                        } else {
                            return 'success-row';
                        }
                    }
                }
                return '';
            }
        },
        activated() {
            this.currentDate = dateUtil.getCurrentMonth();
            this.initMonth();
        }
    }
</script>

<style scoped>

  #month /deep/ .ivu-badge-status-text {
    width: 150px;
  }

  #month /deep/ .cell {
    padding: 0 !important;
  }

  .showClass {
    background-color: red;
  }

</style>

<style>
  /* 选中日/月的样式 */
  .ivu-table .calendar-table-select-cell {
    background-color: #ceffb7;
  }

  .headerClass {
    font-size: 24px;
    height: 80px !important;
  }

  /* 表格行样式 */
  .cellClass {
    width: 100% !important; /* 使得单元格宽度占满 */
    height: 100% !important; /* 使得单元格高度占满 */
    padding: 0 !important;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
